<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" v-show="flag">
      <el-col :span="6">
        <el-form-item label="公告内容">
          <el-input
            v-model="form.name"
            size="small"
            placeholder="请输入 公告内容"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="状态">
          <el-select
            v-model="form.region"
            placeholder="请选择 状态"
            size="small"
          >
            <el-option label="区域一" :value="0"></el-option>
            <el-option label="区域二" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="是否置顶">
          <el-select
            v-model="form.region"
            placeholder="请选择 是否置顶"
            size="small"
          >
            <el-option label="区域一" :value="0"></el-option>
            <el-option label="区域二" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" size="small">搜索</el-button>
        <el-button size="small" @click="resetForm">清空</el-button>
      </el-col>
    </el-form>
    <div class="add">
      <el-button type="primary" size="small">新增</el-button>
      <div class="btn">
        <el-button icon="el-icon-refresh" circle size="small"></el-button>
        <el-button
          icon="el-icon-search"
          circle
          size="small"
          @click="aaa"
        ></el-button>
      </div>
    </div>
    <!-- 表单 -->
    <div>
      <el-table
        :data="tableData"
        border
        stripe
        v-loading="loading"
        style="width: 100%"
        size="small"
      >
        <el-table-column type="index" label="序号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="title" label="公告内容" align="center">
        </el-table-column>
        <el-table-column prop="name" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag size="medium" type="danger" v-if="scope.row.status==0">撤销</el-tag>
            <el-tag size="medium" v-if="scope.row.status==1">公布</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="是否置顶" align="center">
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row.isTop==0">否</el-tag>
            <el-tag size="medium" v-if="scope.row.isTop==1">是</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          background
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //搜索
      form: {
        name: "",
        region: "",
      },
      flag: true,
      //表单
      objPage: {
        current: 1,
        size: 10,
      },
      //表单数据
      tableData: [],
      loading:true,
      //分页
      total:0,
    };
  },
  created() {
    this.getForm();
  },
  methods: {
    // 搜索栏
    //显示隐藏
    aaa() {
      if (this.flag) {
        this.flag = false;
        console.log(this.flag);
      } else {
        this.flag = true;
        console.log(this.flag);
      }
    },
    // 清空
    resetForm() {
      let a = {
        name: "",
        region: "",
      };
      this.form = a;
    },
    //表单
    //数据
    getForm() {
      this.loading=true;
      this.objPage.t=new Date().getTime()
      this.$http
        .get("/apis/shop/notice/page", { params: this.objPage })
        .then((res) => {
          console.log(res);
          if(res.code=="00000"){
          this.tableData=res.data.records;
          this.total=res.data.total;
          this.loading=false;
          }else{
            this.$message('这是一条消息提示');
          }
          // console.log(this.tableData);
        });
    },
    // 表单操作方法
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //分页
    // 分页操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.objPage.size=val;
      this.getForm();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.objPage.current=val;
      this.getForm();
    },
  }, //method结束
};
</script>

<style scoped>
* {
  list-style: none;
  text-decoration: none;
}
.add {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
/* >>> .btn .el-icon-search {
  
} */
.btn .el-button:hover {
  background-color: #efeded;
  color: slateblue;
}
>>> .has-gutter .el-table__cell {
  background-color: #fafafa;
  color: black;
}
>>> .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-pagination {
  text-align: right;
}

>>> .el-table__cell {
  padding: 7px;
}
</style>